<template>
	<view id="money-page">
		<view class="page-header">
			<view class="balance-title">余额</view>
			<view class="balance">{{userInfo.balance}}</view>
		</view>
		<view class="page-body">
			<view class="opt-box">
				<view class="opt-row" @click="toPage('recharge')">
					<image class="img" src="../../static/img/recharge_icon.png" mode=""></image>
					<text class="title">充值</text>
					<uni-icons class="row-icon" type="arrowright" color="#888" size="16"></uni-icons>
				</view>
				<view class="opt-row" @click="toPage('withdraw')">
					<image class="img" src="../../static/img/withdraw_icon.png" mode=""></image>
					<text class="title">提现</text>
					<uni-icons class="row-icon" type="arrowright" color="#888" size="16"></uni-icons>
				</view>
				<view class="opt-row" @click="toPage('funds')">
					<image class="img" src="../../static/img/funds_detail_icon.png" mode=""></image>
					<text class="title">资金明细</text>
					<uni-icons class="row-icon" type="arrowright" color="#888" size="16"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {apiUserInfo} from '../../../http/apis.js'
	export default {
		computed: {
			...mapState(['token'])
		},
		data (){
			return {
				userInfo: {}
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {
			
		},
		methods:{
			getUserInfo(){
				apiUserInfo({
					token: this.token
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.userInfo = res.data.msg
					}         
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			toPage(type){
				if(type=='recharge') {
					uni.navigateTo({
						url: './recharge'
					})
				} else if(type=='withdraw') {
					uni.navigateTo({
						url: './withdraw'
					})
				} else {
					uni.navigateTo({
						url: './fundsDetail'
					})
				}
			}
		}
		
	}
</script>

<style lang="scss">
	#money-page {
		.page-header {
			background: $theme-color;
			height: 200upx;
			position: relative;
			color: #FFFFFF;
			padding: 20upx;
			.balance-title {
				font-size: 28upx;
			}
			.balance {
				position: absolute;
				left: 20upx;
				bottom: 20upx;
				font-size: 64upx;
			}
		}
		.page-body {
			.opt-box {
				.opt-row {
					display:flex;
					align-items:center;
					padding: 20upx 30upx;
					position:relative;
					border-bottom: 1px solid #E4E7ED;
					.img {
						width: 50upx;
						height: 50upx;
					}
					.title {
						flex: 1;
						font-size: 32upx;
						margin-left: 20upx;
					}
					.row-icon {
						padding: 10upx;
						margin-left: 6upx;
					}
				}
			}
		}
	}
</style>
